<template>
  <el-tree-select
    v-model="selectVal"
    :data="dataList"
    :props="defaultProps"
    check-strictly
    :render-after-expand="false"
    clearable
  />
</template>

<script setup lang="ts">

// 声明外部传入的数据
import useDictStore from "@/store/modules/dict";
import {getDataByType} from "@/views/system/dict/api";
import {DictVO} from "@/views/system/dict/api";

const props = defineProps({
  dictType: {type: String, default: ''},
  dictValue: {type: String, default: ''},
  dictLabel: {type: String, default: ''},
});

const defaultProps = {
  label: 'name',
  value: 'value',
  children: 'children',
}
// 定义需要回传的数据
const emits = defineEmits(["update:dictValue"]);

// 定义字典的数据列表
let dataList = ref();
const {proxy} = getCurrentInstance() as ComponentInternalInstance

const selectVal = computed({
  get() {
    return props.dictValue
  },
  set(val) {
    emits("update:dictValue", val)
  }
})

async function getTreeList() {
  let res: any;
  const treeData = useDictStore().getDict(props.dictType)
  if (!treeData){
    res = await getDataByType(props.dictType)
    res = res.data
    useDictStore().setDict(props.dictType,res)
  }else{
    res = toRaw(treeData)
  }
  dataList.value = proxy?.handleTree2<DictVO>(res,2,"value",'children')
}
onMounted(getTreeList)

</script>
